<template>
  <div class="myDetail">
    <div class="content">
      <label>账号</label>
      <input
        type="text"
        :placeholder="buyerInfo.buyerId"
        v-model="buyerId"
        name="buyerId"
        required
        v-validate="{
          required: true,
          regex: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/,
        }"
        :class="{ invalid: errors.has('buyerId') }"
        disabled="disabled"
      />
      <span class="error-msg">{{ errors.first("buyerId") }}</span>
    </div>
    <div class="content">
      <label>用户名</label>
      <input
        type="text"
        :placeholder="buyerInfo.buyerName"
        v-model="buyerName"
        name="buyerName"
        required
        v-validate="{ required: true }"
        :class="{ invalid: errors.has('buyerName') }"
      />
      <span class="error-msg">{{ errors.first("buyerName") }}</span>
    </div>
    <div class="content">
      <label>手机号:</label>
      <input
        type="text"
        :placeholder="buyerInfo.buyerPhone"
        v-model="buyerPhone"
        name="buyerPhone"
        required
        v-validate="{ required: true, regex: /^1\d{10}$/ }"
        :class="{ invalid: errors.has('buyerPhone') }"
      />
      <span class="error-msg">{{ errors.first("buyerPhone") }}</span>
    </div>
    <div class="content">
      <label>默认地址:</label>
      <input
        type="text"
        :placeholder="addressList[0]"
        v-model="addressList[0]"
        name="buyerAddress"
        required
        v-validate="{ required: true }"
        :class="{ invalid: errors.has('buyerAddress') }"
      /><a @click="dialogFormVisible=!dialogFormVisible">地址管理</a>
      <span class="error-msg">{{ errors.first("buyerAddress") }}</span>
    </div>

    <div class="btn">
      <button @click="buyerDetail">修改信息</button>
    </div>
    <el-dialog title="地址管理" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="地址名称" :label-width="formLabelWidth">
          <el-input v-model="form.newAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="已有地址" :label-width="formLabelWidth">
          <el-select placeholder="查看地址" v-model="form.buyerAddress">
            <div v-for="(address, index) in addressList" :key="index">
              <el-option :label="address" :value="address"></el-option>
            </div>
          </el-select>
          <br />
          <el-button type="primary" style="margin-top: 10px" @click="changeDefaultAddress"
            >设为默认</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="changeAddress(1)"
            style="margin-left: 10px; margin-top: 10px" 
            >删除</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeAddress(2)">新建地址</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "MyDetail",

  data() {
    return {
      buyerName: "", //用户名
      buyerId: "", //账号
      buyerAddress: "", //地址
      buyerPhone: "", //手机
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        buyerAddress: "",
        newAddress: "",
      },
    };
  },

  mounted() {
    this.buyerId = this.buyerInfo.buyerId;
    this.buyerName = this.buyerInfo.buyerName;
    this.buyerAddress = this.buyerInfo.buyerAddress;
    this.buyerPhone = this.buyerInfo.buyerPhone;
  },
  computed: {
    ...mapState({
      buyerInfo: (state) => state.user.buyerInfo,
    }),
    addressList() {
      let address = this.buyerInfo.buyerAddress;
      return address.split(";");
    },
  },
  methods: {
    async buyerDetail() {
      //所有表单验证成功再发请求
      const success = await this.$validator.validateAll();
      if (success) {
        try {
          //如果成功路由跳转到登陆
          const { buyerName, buyerId, buyerPhone } = this;
          let buyerAddress = this.addressList.join(";");
          await this.$store.dispatch("updateBuyerDetail", {
            buyerName,
            buyerId,
            buyerAddress,
            buyerPhone,
          });
          alert("修改成功");
          this.$router.push("/center/mydetail");
        } catch (error) {
          alert(error.message);
        }
      }
    },
    //修改默认地址
    async changeDefaultAddress() {
      if (this.form.buyerAddress) {
        try {
          await this.$store.dispatch("changeDefaultAddress", this.form.buyerAddress);
          await this.$store.dispatch("getBuyerInfo");
        } catch (error) {
          alert(error.message);
        }
      }else{
        alert("请选择地址")
      }
    },
    //修改买家地址
    
    async changeAddress(change) {
      let buyerAddress="";
      if(change==1 && this.form.buyerAddress){//删除地址
        let addressList = this.addressList.filter(item => item != this.form.buyerAddress);
        buyerAddress = addressList.join(";");
      }else if(change==2 && this.form.newAddress){//创建地址
        this.addressList.push(this.form.newAddress);
        buyerAddress = this.addressList.join(";");
      }
      if(buyerAddress){
        try {
          let data={
            buyerAddress:"",
          };
          data.buyerAddress=buyerAddress;
          await this.$store.dispatch("changeAddress", data);
          await this.$store.dispatch("getBuyerInfo");
            this.form.buyerAddress="";
            this.form.newAddress="";
        } catch (error) {
          alert(error.message);
        }
      }else{
        alert("地址不能为空");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.myDetail {
  margin-top: 100px;
  margin-left: 200px;
}
.content {
  padding-left: 190px;
  margin-bottom: 18px;
  position: relative;

  label {
    font-size: 14px;
    width: 96px;
    text-align: right;
    display: inline-block;
  }

  input {
    width: 270px;
    height: 38px;
    padding-left: 8px;
    box-sizing: border-box;
    margin-left: 5px;
    outline: none;
    border: 1px solid #999;
  }

  img {
    vertical-align: sub;
  }

  .error-msg {
    position: absolute;
    top: 100%;
    left: 495px;
    color: red;
  }
}
.btn {
  text-align: center;
  line-height: 36px;
  margin-left: -130px;

  button {
    outline: none;
    width: 270px;
    height: 36px;
    background: #e1251b;
    color: #fff !important;
    display: inline-block;
    font-size: 16px;
  }
}
</style>